<template>
    <div class="hl-page" :class="type">
        <header ref="header" class="header">
            <h1>{{title}}</h1>
            <i v-show="!hiddenBack" @click="back" class="cubeic-back"></i>
        </header>
        <div class="wrapper" :class="hiddenTabBar?'no-bar':'has-bar'" ref="wrapper">
           <slot name="content"></slot>
        </div>
        <slot name="tab"></slot>
    </div>
</template>

<script>
    export default {
        name: "hl-page",
        props:{
            title:"",
            type:"",
            hiddenTabBar:{
                type:Boolean,
                default:false
            },
            hiddenBack:{
                type:Boolean,
                default:true
            }
        },

        methods:{
            back(){
                this.$router.back()
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../assets/theme";
    .hl-page {
        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #efeff4;
        .header {
            position: relative;
            height: 88px;
            line-height: 88px;
            text-align: center;
            background-color: @app-color;
            box-shadow: 0 2px 12px #ccc;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            z-index: 5;
            h1 {
                font-size: 16PX;
                font-weight: 700;
                color: #fff;
            }
            .cubeic-back {
                position: absolute;
                top: 0;
                left: 0;
                font-size: 20PX;
                padding: 0 15PX;
                color: #ffffff;
            }
        }
        > .wrapper {
            height: calc(~"100% - 88px");
            overflow: auto;
            -webkit-overflow-scrolling: touch;

            &.has-bar {
                height: calc(~"100% - 88px - 100px");
            }
        }
    }
</style>